<template>
  <div>
    <div style="margin-bottom:20px">
      <a-form-model
        ref="ruleFormLine"
        :model="formLine"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        layout="inline"
      >
        <a-form-model-item ref="title" label="标题" prop="title">
          <a-input v-model="formLine.title" :maxLength="30" />
        </a-form-model-item>
        <a-form-model-item ref="name" label="发布人" prop="name">
          <a-input v-model="formLine.name" :maxLength="30" />
        </a-form-model-item>
        <a-form-model-item ref="dayTime" label="发布日期" prop="dayTime">
          <a-range-picker @change="onChange" :placeholder="placeholder" v-model="formLine.dayTime" />
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary">查询</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>

    <!-- 表格 -->
    <div class="atable" style="margin-bottom:20px">
      <a-table :columns="columns" :data-source="data" :pagination="false">
        <span slot="progressStatus" slot-scope="progressStatus">
          <a-switch :default-checked="progressStatus">
            <a-icon slot="checkedChildren" type="check" />
            <a-icon slot="unCheckedChildren" type="close" />
          </a-switch>
        </span>

        <span slot="action" slot-scope="text, record">
          <a style="color:#1890FF;margin-right:20px" @click="onEdit(text, record)">编辑</a>
          <a style="color:#1890FF;" @click="onDelete(text, record)">删除</a>
        </span>
      </a-table>
    </div>
    <!-- 分页 -->
    <div class="pagination flexBetween">
      <div>共 {{total}} 条记录 第 {{current}} / {{this.configFun.pageNum(Math.ceil((total/pageSize)))}} 页</div>
      <div>
        <a-pagination
          :current="current"
          :page-size-options="pageSizeOptions"
          :total="this.configFun.pageNum(total)"
          show-size-changer
          :page-size="pageSize"
          @showSizeChange="onShowSizeChange"
          @change="pageChange"
          show-quick-jumper
        >
          <template slot="buildOptionText" slot-scope="props">
            <span>{{ props.value }}条/页</span>
            <!-- <span v-if="props.value === '40'">全部</span> -->
          </template>
        </a-pagination>
      </div>
    </div>
    <!-- 对话框 -->
    <div class="amodal">
      <a-modal
        v-model="visible"
        :title="modelTitle"
        @ok="handleOk"
        :maskClosable="false"
        cancelText="取消"
        okText="确认"
        class="aModal"
        :centered="true"
      >
        <a-form-model ref="ruleForm" :model="form" v-if="visible" :rules="rules">
          <a-form-model-item ref="name" label="栏目名称" prop="name">
            <a-input v-model="form.name" :maxLength="30" placeholder="请输入栏目名称" />
          </a-form-model-item>
          <a-form-model-item ref="order" label="排序" prop="order">
            <a-input v-model="form.order" :maxLength="30" placeholder="请输入排序" />
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
  </div>
</template>

<script>
const columns = [
  { title: '标题', dataIndex: 'recordDate', key: 'recordDate' },
  { title: '排序', dataIndex: 'fullName', key: 'fullName', scopedSlots: { customRender: 'fullName' } },
  { title: '内容数量', dataIndex: 'postName', key: 'postName', align: 'center' },
  { title: '更新时间', dataIndex: 'time', key: 'time', align: 'center' },
  { title: '推送范围', dataIndex: 'range', key: 'range', align: 'center' },
  {
    title: '是否发布',
    dataIndex: 'progressStatus',
    key: 'progressStatus',
    scopedSlots: { customRender: 'progressStatus' },
    align: 'center'
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
    align: 'center'
  }
]
const tabdata = [
  {
    key: '1',
    recordDate: '安全教育',
    fullName: '31.2G/800G',

    postName: '8',
    time: '2020-07-08 15:07:13',
    range: '全部空间',
    progressStatus: true
  },
  {
    key: '2',
    recordDate: '技术交底',
    fullName: '31.2G/800G',
    postName: '8',
    time: '2020-07-08 15:07:13',
    range: '指定空间',
    progressStatus: false
  }
]
export default {
  data() {
    return {
      columns,
      data: tabdata,

      pageSizeOptions: ['5', '10', '20', '30', '40'],
      current: 1,
      pageSize: 10,
      total: 1,
      modelTitle: '新建栏目',
      visible: false,
      rangeValue: 1,
      placeholder: ['请选择', '请选择'],
      rules: {
        name: [
          {
            required: true,
            message: '请输入栏目名称',
            trigger: 'change'
          }
        ]
      },
      formLine: {
        name: '',
        title: '',
        dayTime: []
      },
      labelCol: { span: 6 },
      wrapperCol: { span: 18 }
    }
  },
  methods: {
    onShowSizeChange(current, pageSize) {
      // console.log(current, pageSize)
      this.current = 1
      this.pageSize = pageSize
      //   this.getTotal(pageSize, this.current)
      // this.getTable()
    },
    pageChange(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      //   this.getTotal(pageSize, this.current)
    },
    onDelete() {},
    onEdit() {},
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.visible = false
        } else {
          return false
        }
      })
    },
    onAdd() {
      this.visible = true
      this.form.name = ''
    },
    //配置管理
    onSet() {
      this.$router.push({ path: '/projectService/spaceAllocation' })
    },

    //时间切换
    onChange(date, dateString) {
      console.log(date, dateString)
    }
  }
}
</script>

<style>
</style>